Step 4 - Create states for the Car page

In this step you use the Kanzi state machine to show the car in your application from different angles and to animate the transition between those states.

Create the car shadow

In this section in the Car Page node you adjust the material used for the car shadow.

To create the car shadow:

1. In the Project double-click the Car Page node to open it in a new Preview tab.
   Under the car model there is a plane. This is because the alpha blending mode is incorrect for the material used to render the shadow texture.
   
2. Select the Car > Viewport 2D > Car > RootNode > Shadowplane node and in the Properties click next to the Cluster Material property to open the properties of the Shadow material.
   
3. In the Shadow material Properties set the Blend Mode to Alpha: Automatic.
   

Create states

In this section you create different states for the car, each focusing on a different part of the car. In the next section of this step you create the UI controls you can click to go to those states.

In Kanzi the state manager is one of the most important features for creating rich user interfaces.

To create states:

1. In the Project select the Car > Viewport 2D > Car > RootNode > Camera_Root node.
   
2. In the State Tools window click Create State Manager to create a state manager in the Camera_Root node.
   You can find the State Tools window below the Preview window.
   
   Kanzi Studio creates a new state manager and assigns it to the Camera_Root node. When the State Tools are active the Preview tab is orange and you can create states using the State Tools. When the State Tools are active, Kanzi Studio tracks all property value changes, and you can use the State Tools to store these values to states.
   
3. In the State Tools click Create State to create a state. Create three states.
   
4. Double-click the name of each state and name the states Brakes, Roof, Suspension.
   
5. In the Project select the Car > Viewport 2D > Car > RootNode > Camera_Root > Camera node.
   
6. In the Preview select the Camera tool and click . When you enable this option, Kanzi Studio stores the current position of the free camera to the Camera node you select in the Camera tool dropdown menu. In this case this is the Camera node you selected in the Project.
   
7. In the Project select the Car > Viewport 2D > Car > RootNode > Car node and in the Preview Camera tool click to bring the camera closer to the car.
   
8. In the Preview Camera tool use the orbit camera to set the position of the car and in the State Tools click to save the current values to that state.
   For example, when you are satisfied with the position, in the State Tools in the Brakes state click to store the current position of the Camera node to that state.
   
   Orbit camera allows you to move around the nodes selected in the Project or the node set in the Look At property of the camera. To move with the orbit camera, use these controls:
   

Control	Description
Click and drag the left mouse button.	Rotate
Click and drag the middle mouse button. Press the Space key, and click and drag the left mouse button.	Pan
Scroll the mouse wheel. Press the Shift and Alt keys, and click and drag the left mouse button.	Zoom

9. Repeat the previous step until you create positions for all states.
   
   
   
10. In the Preview click to enter the Interact mode and in the State Tools click each state to see what your application looks like in that state. In this case you can see the scene with the car shown in positions you defined for each state.
11. In the State Tools click Edit State Manager to deactivate the State Tools.
    

Create the controls to transition between states

In this section you create the controls to transition between the states you created in the previous section.

To create the controls to transition between states:

1. In the Project press Alt and right-click the Car > Viewport 2D node, select Stack Layout 2D, and name it CarControl.
   
2. In the Project select the CarControl node and in the Properties set the Direction property to Y.
   Use the Direction property to set the axis along which you want the Stack Layout node to stack its child nodes.
   
3. In the Project press Alt and right-click Prefabs and create a Button 2D node, and in the Button 2D create an Image node.
   You use this prefab to control the state manager you created earlier in this step.
   
4. Select the Image node and in the Properties add and set:
   • Layout Width and Layout Height properties to 100 pixels.
   • Vertical Margin property Bottom property field to 10.
   • Next to the Image property click .
     This enables you to show a different image for each instance of that prefab in your project.
   
5. From the Project > Prefabs drag three Button 2D prefabs to the Car > Viewport 2D > CarControl node.
   Kanzi Studio instantiates the Button 2D prefabs in the CarControl node.
   
6. Select each Button 2D prefab instance, press F2, and name them Brakes, Roof, and Suspension.
   
7. In the Project in the CarControl node select the first of the instantiated Button 2D prefabs:
   1. In the Properties add and set the FirstApplication.Button2D.Image property to the StateBrakes image.
      
   2. In the Node Components > Triggers section add the Button: Click trigger and in the dropdown menu select the Go to State action and select the state manager you added to the Camera_Root node, set it to the state Brakes, and click Save.
      
8. Repeat the previous step to set the remaining two Button 2D prefabs. Use the StateRoof and StateSuspension images, and set the Go to State action to point to the states Roof and Suspension.
   When you click the buttons in the CarControl node, Kanzi Studio transitions to that state using the default linear transition. You can adjust the transitions using the State Transition Editor. See Using state transitions.
   

Adjust the position of the buttons

In this section you adjust the position of the buttons that control the states of the car.

To adjust the position of the buttons:

1. Click the Screen tab under the main menu to show the entire application in the Preview.
   
2. In the Pages click the Car Page node, in the Preview use the Node tool to position the CarControl node.
   
   TIP

   To select a node with the Node tool, double-click the node you want to select in the Preview.

   

See also

To find out more about working with the state managers, see Creating state managers and complete the Tutorial: Use state managers to control your application.

To find out more about working with triggers and actions, see Triggers.

To find out more about working with the Preview Camera tool, see Using the Camera node.

Open topic with navigation